<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, user-scalable=no,
		 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/lunbo.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css"/>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="banner container">
			<div style="height: auto;" class="swiper-container">
				<div class="swiper-wrapper">
			
					<!-- 下面是4个不同颜色的轮播滑块 -->
					<div style="background-color: ;" class="swiper-slide sw-slide secope"><img src="img/banner.png" /></div>
					<div style="background-color: ;" class="swiper-slide secope "><img src="img/banner.png" />
					</div>
					<div style="background-color: ;" class="swiper-slide secope"><img src="img/banner.png" />
					</div>
					<div style="background-color: ;" class="swiper-slide secope"><img src="img/banner.png" /></div>
				</div>
				<!-- <div class="swiper-button-prev" ></div> -->
				<!--左箭头-->
				<!-- <div class="swiper-button-next"></div> -->
				<!--右箭头-->
				<div class="swiper-pagination"></div>
				<!--分页器（就是4个点点）-->
			</div>
		</div>
		<div class="header container">
			<span></span>
			<h2>我的课程</h2>
		</div>
		<div class="body_body">
			<div class="body_left">
				<span>计算机类</span>
				<span>操作类</span>
				<span>文科类</span>
			</div>
			<div class="body_right">
				<a href="../课程详情和课程参数/index.html">
					<figure>
						<span><img src="img/course1.png" ></span>
						<div class="main_item">
							<p>生活实用心理学课程，教你轻松应对生活难题</p>
							<i>共30讲</i>
						</div>
					</figure>
				</a>
				<figure>
					<span><img src="img/course2.png" ></span>
					<div class="main_item">
						<p>生活实用心理学课程，教你轻松应对生活难题</p>
						<i>共30讲</i>
					</div>
				</figure>
				<figure>
					<span><img src="img/course3.png" ></span>
					<div class="main_item">
						<p>生活实用心理学课程，教你轻松应对生活难题</p>
						<i>共30讲</i>
					</div>
				</figure>
			</div>
		</div>
		
		
		
		<div class="footer container">
					<ul>
						<li>
							<a href="../首页/index.html">
								<span>&#xe751;</span>
								<span>首页</span>
							</a>
						</li>
						<li>
							<a href="../课程/index.html">
								<span>&#xe614;</span>
								<span>课程</span>
							</a>
						</li>
						<li>
							<a href="../话题和关注/index.html">
								<span>
									&#xe630;
									</svg>
								</span>
								<span>话题</span>
							</a>
						</li>
						<li>
							<a href="../我的/index.html">
								<span>&#xe600;</span>
								<span>我的</span>
							</a>
						</li>
					</ul>
				</div>
	</body>
</html>
<script>
	var mySwiper = new Swiper('.swiper-container', { //初始化Swiper
		autoplay: { //自动切换
			delay: 3000,
			stopOnLastSlide: false,
			disableOnInteraction: false,

		},
		navigation: { //前进后退
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',

		},
		pagination: { //分页器
			el: '.swiper-pagination',
			clickable: true,

		},
		loop: true, //循环
	})
</script>
